<template>
  <div class="son">
    {{ name }}
    <hr />
    {{ isAdmin }}
    <hr />
    {{ age }}
    <hr />
    {{ cars }}
    <hr />
    {{ firend }}
    <hr />
    子组件:{{ myson }}
    <button @click="handlerChangeData">修改数据</button>
    <button @click="handlerSendData">传递数据</button>
    <button @click="handlerMyEvent">触发自定义函数</button>
  </div>
</template>
<script>
/*
$emit: 子组件调用父组件的自定义事件函数
事件注册: 
  默认的事件函数 @click @blur @change @mouseover ..
  自定义事件函数 @自定义函数名
子传父的本质: 
   父向子提供函数 
   子调用父的函数 
   子中要传递的数据以父函数的参数的形式进行传递  即为  子组件中调用父组件中的函数
*/
export default {
  // 接收父组件的数据 props
  // 数组中存储的就是父组件的属性 props 中的数据 最好按照只读的模式处理
  // props:["name","isAdmin","age","cars","firend"],
  // 对象的形式  key 传来的属性 :value 对应的类型
  // 只针对于类型进行校验，如果类型不匹配 不报语法错误 只会给与警告
  // props:{
  //     name:String,
  //     isAdmin:Boolean,
  //     age:Number,
  //     cars:Array,
  //     firend:Object
  // },
  // key： 传来的属性 value：Object
  /*
    Object：
       type：类型校验
       required: 是否必填项
       default： 默认值
       validator: 自定义校验器
    */
  props: {
    name:{
        type:String,
        required:true  // 必须要传来
    },
    isAdmin:{
        type:Boolean
    },
    age:{
        type:Number,
        default:18
    },
    cars:{
        type:Array,
        default:() => ["奔驰","宝马"]
    },
    firend:{
        type:Object,
        // 小明的朋友 小红 寒梅
        validator(obj) {
            return  ["小红","寒梅"].includes(obj.name);
        }
    },
    getSon:Function
  },
  data() {
    return {
        myson:"我是子组件"
    }
  },
  methods: {
    handlerChangeData() {
      // this.name = "吉姆"
     // console.log(this.firend);
      console.log(this);
    },
    handlerSendData() {
        // 子组件中调用父组件的函数
        this.getSon(this.myson)
    },
    handlerMyEvent() {
        /*
        参数1： 自定义的事件名
        参数2-参数n  自定义事件的参数
        */
        this.$emit("web44",this.myson)

    }
  },
};
</script>

<style>
.son {
  width: 200px;
  height: 300px;
  background-color: yellow;
}
</style>
